<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>Expense Tracker App</title>
</head>
<body>
    <h1>Expense Tracker App</h1>
    <div class="input-section">
        <label for="category-select" class="s1">Category:</label>
        <select id="category-select">
            <option value="Food & Beverage">Food & Beverage</option>
            <option value="Rent">Rent</option>
            <option value="Transport">Transport</option>
            <option value="Relaxing">Relaxing</option>
        </select>
        <label for="amount-input">Amount:</label>
        <input type="number" id="amount-input">
        <label for="date-input">Date:</label>
        <input type="date" id="date-input">
        <button id="add-btn">Add</button>
    </div>
    <div class="expenses-list">
        <h2>Expenses List</h2>
        <table>
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Amount</th>
                    <th>Date</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody id="expnese-table-body">

            </tbody>
            <tfoot>
                <tr>
                    <td>Total:</td>
                    <td id="total-amount"></td>
                    <td></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>